const ResolveTypeScriptPlugin = require('resolve-typescript-plugin');
const {
	defineConfig
} = require('@vue/cli-service')
const path = require('path');

module.exports = defineConfig({
	publicPath: './', // 使用相对路径
	outputDir: 'dist',
	assetsDir: 'static', // 静态资源目录
	filenameHashing: true, // 开启文件名哈希，确保缓存更新
	transpileDependencies: true,
	devServer: {
		host: '0.0.0.0' // 允许局域网访问
		// port: 8080, // 端口号，可根据需要修改
		// open: false, // 是否自动打开浏览器
		// hot: true, // 启用热更新
		// allowedHosts: 'all', // 允许所有主机访问
	},
	configureWebpack: {
		output: {
			filename: 'static/js/[name].[contenthash:8].js',
			chunkFilename: 'static/js/[name].[contenthash:8].js'
		},
		resolve: {
			extensions: ['.mjs', '.js', '.jsx', '.json', '.ts', '.tsx', '.vue'],
			plugins: [new ResolveTypeScriptPlugin()],
			alias: {
				'@': path.resolve(__dirname, 'src') // 添加路径别名
			}

		},
		module: {
			rules: [{
					test: /\.tsx?$/,
					loader: 'ts-loader',
					exclude: /node_modules/,
					options: {
						appendTsSuffixTo: [/\.vue$/], // 支持 Vue 单文件组件中的 TypeScript
					}
				},
				{
					test: /\.svg$/,
					loader: 'raw-loader',
					type: 'javascript/auto' // 防止与其他loader冲突
				}
			],
		},
	},
	chainWebpack: (config) => {
		// 确保 Vue 文件中的 TypeScript 被正确处理
		config.module
			.rule('vue')
			.use('vue-loader')
			.tap(options => ({
				...options,
				reactivityTransform: true // 如果需要响应性语法糖
			}));
		// 关键配置：处理 HTML 中的资源路径
		config.plugin('html').tap(args => {
			if (args[0]) {
				args[0].minify = false; // 关闭压缩以更好地查看结果
			}
			return args;
		});
		// 移除默认的 SVG 处理 (关键修改)
		config.module.rules.delete('svg');
	}
})